
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="ch">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="左右结构项目，属于大人员的社交工具">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>校园网上订餐系统</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$(function() {
		$(".meun-item").click(function() {
			$(".meun-item").removeClass("meun-item-active");
			$(this).addClass("meun-item-active");
			var itmeObj = $(".meun-item").find("img");
			itmeObj.each(function() {
				var items = $(this).attr("src");
				items = items.replace("_grey.png", ".png");
				items = items.replace(".png", "_grey.png")
				$(this).attr("src", items);
			});
			var attrObj = $(this).find("img").attr("src");
			;
			attrObj = attrObj.replace("_grey.png", ".png");
			$(this).find("img").attr("src", attrObj);
		});
		$("#topAD").click(function() {
			$("#topA").toggleClass(" glyphicon-triangle-right");
			$("#topA").toggleClass(" glyphicon-triangle-bottom");
		});
		$("#topBD").click(function() {
			$("#topB").toggleClass(" glyphicon-triangle-right");
			$("#topB").toggleClass(" glyphicon-triangle-bottom");
		});
		$("#topCD").click(function() {
			$("#topC").toggleClass(" glyphicon-triangle-right");
			$("#topC").toggleClass(" glyphicon-triangle-bottom");
		});
		$(".toggle-btn").click(function() {
			$("#leftMeun").toggleClass("show");
			$("#rightContent").toggleClass("pd0px");
		})
	})
</script>

<!-- 引入layui.js文件 -->
<script src="js/layui.js" charset="utf-8"></script>

<!-- 引入layui.css文件 -->
<link rel="stylesheet" href="layui/css/layui.css" media="all">

<!--1. Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">


<style type="text/css">
::-webkit-scrollbar {
	display: none
}

.table {
	table-layout: fixed;
	/*word-wrap: break-word;
	overflow: hidden;*/
}

td {
	width: 100%;
	word-break: keep-all;
	/* 不换行 */
	white-space: nowrap;
	/* 不换行 */
	/*overflow: hidden;*/
	overflow-x: scroll;
	/* 内容超出宽度时隐藏超出部分的内容 */
	/*text-overflow: ;*/
	/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
<script type="text/javascript">
	$(function() {
		$(".tdd").mouseover(function() {
			alert($(this).text());
		});
	});
</script>

<!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/slide.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/flat-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
</head>

<body>
	<div id="wrap">
		<!-- 左侧菜单栏目块 -->
		<div class="leftMeun" id="leftMeun">
			<div id="logoDiv">
				<p id="logoP">
					<img id="logo" src="images/logo3.jpg"><span>与食俱进</span>
				</p>
			</div>
			<div id="personInfor">
				<p id="userName">大洋</p>
				<p></p>
				<p>
					<a>退出登录</a>
				</p>
			</div>
			<div class="meun-title">餐品管理</div>
			<div class="meun-item" href="#shop" aria-controls="shop" role="tab"
				data-toggle="tab">
				<img src="images/icon_source.png">餐品管理
			</div>
			<div class="meun-item meun-item-active" href="#producttype"
				aria-controls="producttype" role="tab" data-toggle="tab">
				<img src="images/icon_chara_grey.png">餐品类型管理
			</div>
			<div class="meun-title">订单管理</div>
			<div class="meun-item" href="#orders" aria-controls="orders"
				role="tab" data-toggle="tab">
				<img src="images/icon_house.png">订单管理
			</div>
			<div class="meun-item" href="#statistics" aria-controls="statistics"
				role="tab" data-toggle="tab">
				<img src="images/icon_source.png">营业额统计
			</div>
			<div class="meun-item" href="#comments" aria-controls="comments"
				role="tab" data-toggle="tab">
				<img src="images/icon_source.png">评价管理
			</div>
		</div>
		<!-- 右侧具体内容栏目 -->
		<div id="rightContent">
			<a class="toggle-btn" id="nimei"> <i
				class="glyphicon glyphicon-align-justify"></i>
			</a>
			<!-- Tab panes -->
			<div class="tab-content">
				<!-- 餐品管理模块 -->

				<!-- 餐品类型管理模块 -->
				<div role="tabpanel" class="tab-pane" id="producttype" style="display:block;">

					<div class="check-div form-inline">
						<div class="col-xs-8">
							<button class="btn btn-yellow btn-xs" data-toggle="modal"
								data-target="#addProducttype">添加餐品类型</button>
						</div>
						<form class="col-xs-4" action="ProductTypeServlet" method="post">
							<input type="text" class="form-control input-sm"
								placeholder="输入文字搜索" name="keywords" value="${keywords}" id="keywords">
							<input type="hidden" class="form-control" name="op" value="queryByPage">
							<button class="btn btn-white btn-xs ">查 询</button>
						</form>
					</div>
					<div class="data-div">
						<table class="table table-striped">
							<tr>
								<td class="col-lg-1 col-md-1 col-sm-1 col-xs-1">类型编号</td>
								<td class="col-lg-3 col-md-3 col-sm-3 col-xs-3">类型名称</td>
								<td class="col-lg-4 col-md-4 col-sm-4 col-xs-4">类型说明</td>
								<td class="col-lg-3 col-md-3 col-sm-3 col-xs-3">操作</td>
							</tr>
							<c:if test="${pd == null}">
								<c:redirect url="ProductTypeServlet?op=queryByPage"></c:redirect>
							</c:if>
							<c:if test="${pd != null}">
								<c:forEach items="${pd.data}" var="producttype">
									<tr>
										<td>${producttype.typeid }</td>
										<td>${producttype.typename }</td>
										<td>${producttype.typeinfo }</td>
										<td>
											<button class="btn btn-success btn-xs updatetype" data-toggle="modal"
												data-target="#changeProducttype">修改</button>
											<button class="btn btn-danger btn-xs deltype" data-toggle="modal"
												data-target="#deleteProducttype">删除</button>
										</td>

									</tr>
								</c:forEach>
							</c:if>
						</table>
					</div>

					<!-- 显示 分页导航区域 -->
					<div id="pagediv" style="text-align: center"></div>

					<!--添加用户弹出窗口-->
					<div class="modal fade" id="addProducttype" role="dialog"
						aria-labelledby="gridSystemModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title" id="gridSystemModalLabel">添加餐品类型</h4>
								</div>
								<div class="modal-body">
									<div class="container-fluid">
									<%=request.getAttribute("msg") == null ? "" : request.getAttribute("msg")%>
										<form class="form-horizontal" action="ProductTypeServlet" method="post">
											<div class="form-group">
												<label for="typename" class="col-xs-3 control-label">类型名称：</label>
												<div class="col-xs-6 ">
													<input type="text" class="form-control input-sm duiqi"
														id="typename" required="required" name="typename" placeholder="请输入餐品类型名称">
												</div>
											</div>
											<div class="form-group">
												<label for="typeinfo" class="col-xs-3 control-label">类型说明：</label>
												<div class="col-xs-6">
													<input type="text" class="form-control input-sm duiqi"
														id="typeinfo" name="typeinfo" placeholder="请输入餐品类型说明">
												</div>
											</div>
											
											<input type="hidden" name="op" value="add">

											
												<button type="button" class="btn btn-xs btn-white"
													data-dismiss="modal">取 消</button>
												<input type="submit" class="btn btn-xs btn-green" value="提交">
										</form>
									</div>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->

					<!--修改用户弹出窗口-->
					<div class="modal fade" id="changeProducttype" role="dialog"
						aria-labelledby="gridSystemModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title" id="gridSystemModalLabel">修改餐品类型</h4>
								</div>
								<div class="modal-body">
									<div class="container-fluid">
									<%=request.getAttribute("msg") == null ? "" : request.getAttribute("msg")%>
										<form class="form-horizontal" action="ProductTypeServlet?op=update" method="post">
											<div class="form-group ">
												<label for="username" class="col-xs-3 control-label">餐品类型编号：</label>
												<div class="col-xs-6 ">
													<input type="text" class="form-control input-sm duiqi"
														id="updatetypeid" name="updatetypeid" readonly="readonly">
												</div>
											</div>
											<div class="form-group">
												<label for="text" class="col-xs-3 control-label">餐品类型名称：</label>
												<div class="col-xs-6 ">
													<input type="text" class="form-control input-sm duiqi"
														id="updatetypename" name="updatetypename">
												</div>
											</div>
											<div class="form-group">
												<label for="userphone" class="col-xs-3 control-label">餐品类型说明：</label>
												<div class="col-xs-6">
													<input type="text" class="form-control input-sm duiqi"
														id="updatettypeinfo" name="updatettypeinfo">
												</div>
											</div>
											<input type="hidden" name="op" value="update">
											<button type="button" class="btn btn-xs btn-white"
													data-dismiss="modal">取 消</button>
											<input type="submit" class="btn btn-xs btn-green" value="保存">
										</form>
									</div>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->

					<!--弹出删除用户警告窗口-->
					<div class="modal fade" id="deleteProducttype" role="dialog"
						aria-labelledby="gridSystemModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
								</div>
								<div class="modal-body">
									<div class="container-fluid">确定要删除该条数据？删除后不可恢复！</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-xs btn-white"
										data-dismiss="modal">取 消</button>
									<button type="button" class="btn btn-xs btn-danger deltypeconfirm">确定</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.nouislider.js"></script>
	<!-- 引入layui.js文件 -->
	<script src="layui/layui.js" charset="utf-8"></script>

	<!-- this page specific inline scripts -->
	<script>
		//min/max slider
		function huadong(my, unit, def, max) {
			$(my).noUiSlider(
					{
						range : [ 0, max ],
						start : [ def ],
						handles : 1,
						connect : 'upper',
						slide : function() {
							var val = Math.floor($(this).val());
							$(this).find(".noUi-handle").text(val + unit);
							console.log($(this).find(".noUi-handle").parent()
									.parent().html());
						},
						set : function() {
							var val = Math.floor($(this).val());
							$(this).find(".noUi-handle").text(val + unit);
						}
					});
			$(my).val(def, true);
		}
		huadong('.slider-minmax1', "分钟", "5", 30);
		huadong('.slider-minmax2', "分钟", "6", 15);
		huadong('.slider-minmax3', "分钟", "10", 60);
		huadong('.slider-minmax4', "次", "2", 10);
		huadong('.slider-minmax5', "天", "3", 7);
		huadong('.slider-minmax6', "天", "8", 10);
	</script>

		    <script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
//完整功能
  laypage.render({
    elem: 'pagediv'
    ,theme:'#428bca'
    ,count: ${pd.totalCount}
    ,curr: ${pd.page}
    ,limit: ${pd.pageSize}
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj, first){
	    //obj包含了当前分页的所有参数，比如：
	    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	    console.log(obj.limit); //得到每页显示的条数
	    
	    //首次不执行
	    //分页的时候也要把查询的关键字传到servlet
	    if(!first){
	      //do something
	       location.href="ProductTypeServlet?op=queryByPage&page="+obj.curr+"&pageSize="+obj.limit+"&keywords="+$("#keywords").val();
	    }
	  }
  });
 
});

/* ************删除的开始***************** */
var typeid =0;
//删除的部分代码
$(".deltype").click(function(){
	//获取到表格的当前第一列，也就是typeid
	typeid = $(this).parents("tr").find("td").eq(0).text();
	console.log("typeid:"+typeid)
});

$(".deltypeconfirm").click(function(){
	$.ajax({
		url:"ProductTypeServlet",
		type:"post",
		data:{op:"del",typeid:typeid},
		success:function(res){
			if(res.msg == "true"){
				console.log("true")
				location.href="ProductTypeServlet?op=queryByPage&page="+${pd.page}+"&pageSize="+${pd.pageSize}+"&keywords="+$("#keywords").val();
			}else{
				console.log("false")
				layer.msg('删除失败!', {
    				icon: 1,
    			    time: 2000, //2s后自动关闭
    			    btn: ['确定']
    			  });
			}
		},
		datatype:"json"
	});
});
/* ************删除的结束***************** */


/* ************修改的开始***************** */
 
 var typeid =0;
 var typename =null;
 var typeinfo = null;
$(".updatetype").click(function(){
	//获取到id
	typeid = $(this).parents("tr").find("td").eq(0).text();
	typename = $(this).parents("tr").find("td").eq(1).text();
	typeinfo = $(this).parents("tr").find("td").eq(2).text();
	
	//把获取到的值放到对应的框中
	$("#updatetypeid").val(typeid);
	$("#updatetypename").val(typename);
	$("#updatettypeinfo").val(typeinfo);
});


 /* ************修改的结束***************** */

  
</script>

</body>

</html>